<template>
  <el-form ref="form"
           :model="form"
           label-width="80px">
    <div class="container">

      <div class="form"
           style="text-align:center;vertical-align:middle;">
        <!-- 封面 -->
        <el-form-item class="uploadCover"
                      size="mini">
          <UploadImg :avatarImg="form.avatar"
                     @imgUrlChange="imageUrlChange"></UploadImg>
        </el-form-item>
      </div>

    </div>

    <el-form-item label="员工账号">
      <el-input v-model="form.account"
                style="width: 200px"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="form.sex"
                 placeholder="不能为空">
        <el-option label="男"
                   value="男"></el-option>
        <el-option label="女"
                   value="女"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="部门">
      <el-select v-model="form.department"
                 placeholder="不能为空">
        <el-option label="教学部"
                   value="教学部"></el-option>
        <el-option label="咨询部"
                   value="咨询部"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="form.telphone"
                style="width: 200px"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email"
                style="width: 200px"></el-input>
    </el-form-item>
    <el-form-item label="签名">
      <el-input v-model="form.slogan"
                style="width: 2000px"></el-input>
    </el-form-item>
    <el-button type="primary"
               @click="upDateMessage">修改信息</el-button>
    <el-form-item>

      <el-form-item label="账号">
        <el-input v-model="form1.account"
                  maxlength="8"
                  style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="旧密码">
        <el-input v-model="form1.password"
                  type="password"
                  maxlength="8"
                  style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="新密码"
                    id="old">
        <el-input v-model="form1.passwordNew1"
                  type="password"
                  maxlength="8"
                  style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="重新输入"
                    id="new"
                    style="width: 280px">
        <el-input v-model="form1.passwordNew2"
                  type="password"
                  maxlength="8"></el-input>
      </el-form-item>
      <el-button type="primary"
                 @click="upDataPassword">修改密码</el-button>

    </el-form-item>
  </el-form>
</template>
<script>
import UploadImg from '../common/uploadImg.vue';
export default {
  data () {
    return {
      userid: '',
      form: {
        account: '',
        sex: '',
        department: '',
        telphone: '',
        email: '',
        avatar: '',
        slogan: ''
      },
      form1: {
        account: '',
        password: '',
        passwordNew1: '',
        passwordNew2: ''
      }
    };
  },
  created: function () {
    // 查询个人信息用于渲染
    this.get();
  },
  methods: {
    get () {
      this.userid = localStorage.getItem('id');
      console.log(this.userid, "get数据userid");
      this.$axios.get('/api/users/findUser/' + this.userid).then((res) => {
        console.log('--------002', res.data.data);
        this.form = res.data.data;
        console.log(this.form.avatar);
      });
    },

    // 子传父
    /*
    props watch
    $emit
    ref refs
    */
    imageUrlChange (data) {
      console.log('--------------', data);
      this.form.avatar = data;
    },
    upDateMessage () {
      this.$alert('是否修改', '确定修改信息', {
        // confirmButtonText: '确定',
        callback: (action) => {
          this.$axios
            .post('/api/users/updata/', this.form)
            .then((res) => {
              if (res.data.code == 200) {
                alert('更新成功');
              } else {
                alert('更新失败');
              }
            })
            .catch({});
        }
      });
    },
    upDataPassword () {
      // 判断 2次输入的新密码是否一致
      if (this.form1.passwordNew1 == this.form1.passwordNew2) {
        this.$alert('是否修改', '确定修改密码', {
          // confirmButtonText: '确定',
          callback: (action) => {
            // 发请求 查询数据库的用户密码是否与用户输入的一致
            this.$axios
              .post('/api/users/findPassword/' + this.form1.account + '/' + this.form1.password)
              .then((res) => {
                if (res.data.code == 200) {
                  // 密码一致时 发请求 修改数据库的密码 通过 account 作为条件
                  this.$axios
                    .post('/api/users/updataPassword/' + this.form1.account + '/' + this.form1.passwordNew1)
                    .then((res) => {
                      if (res.data.code == 200) {
                        alert('修改成功');
                      } else {
                        alert('修改失败');
                      }
                    });
                } else {
                }
              })
              .catch({});
            this.$message({
              type: 'info',
              message: `action: ${action}`
            });
          }
        });
      } else {
        alert('两次密码不一致');
      }
    }

  },
  components: {
    UploadImg
  }
};
</script>
